---
category: HTML
contributors:
    - ChucKN0risK
    - merwok
created: '2020-08-31'
title: script async vs script defer
updated: '2020-10-14'
---

We often use the `script` tag to insert a regular JavaScript file to page:

```html
<script src="/path/to/script.js"></script>
```

When the browser sees a normal `script` tag declaration, it will perform the following steps:

-   Pause the document parser
-   Create a new request to download the script
-   Execute the script after it's downloaded completely
-   Continue parsing the document

```shell
┌───────────────────────┬───────────────────────────────────────┬───────────────────┐
/ Parse the document    / Pause parsing                         / Resume parsing    /
└───────────────────────┼───────────────────┬───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘
```

This flow gives a bad user experience because users can not interact with the page while the script is being downloaded.
They have to wait for all scripts to be downloaded and executed completely before seeing the entire page is parsed.

To fix that problem, HTML 5 provides two attributes for the script tag. They are `async` and `defer`:

```html
<script src="/path/to/script.js" async></script>
<script src="/path/to/script.js" defer></script>
```

These attributes let browser know that the scripts can be downloaded in parallel with the document parser process.

## Differences

1. The `async` and `defer` scripts are executed at different moments.

    After an `async` script is downloaded, the browser will pause the document parser, execute the script and resume parsing the document.

    ```shell
    ┌───────────────────────────────────────────┬───────────────────┬───────────────────┐
    / Parse the document                        / Pause parsing     / Resume parsing    /
    └───────────────────────┬───────────────────┼───────────────────┴───────────────────┘
                            / Download script   /
                            └───────────────────┼───────────────────┐
                                                / Execute script    /
                                                └───────────────────┘
    ```

    The `defer` script, on the other hand, will be executed only when the parser has completed its job.

    ```shell
    ┌───────────────────────────────────────────────────────────┐
    / Parse the document                                        /
    └───────────────────────┬─────────────────┬─────────────────┘
                            / Download script /
                            └─────────────────┘                 ┌───────────────────┐
                                                                / Execute script    /
                                                                └───────────────────┘
    ```

2. The `async` script is executed as soon as it is downloaded completely, hence they might not be executed at the same order as they appear in the page.

    On the other hand, the `defer` scripts guarantee the order of execution.

## Good practices

1. Use `async` for a script that does not depend on other scripts. A statistic script (Google Analytic script, for example) would be fit in this use case.

2. In general, put scripts right before `</body>`.

    ```html
    <body>
        ...
        <script src="..."></script>
        <script src="..."></script>
        <script src="..."></script>
    </body>
    ```

## Good to know

Scripts that are injected to the page [dynamically](https://phuoc.ng/collection/html-dom/load-a-javascript-file-dynamically/) are `async` by default.
However, you can set the `async` attribute to `false` if you want.

```js
const script = document.createElement('script');
script.src = '/path/to/script.js';
script.async = false;
document.head.appendChild(script);
```

## See also

-   [preload vs prefetch](https://phuoc.ng/collection/this-vs-that/preload-vs-prefetch/)
